<template>
    <!-- @close="emit('hide')"  用于在dialog的关闭事件中同步父组件的数据 -->
    <el-dialog v-model="show" title="添加用户" @close="emit('hide')">
        <el-form ref="formRef" :model="form" :rules="rules">
            <el-form-item label="账号" label-width="100px" prop="username">
                <el-input v-model="form.username" autocomplete="off" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item label="姓名" label-width="100px" prop="nickName">
                <el-input v-model="form.nickName" autocomplete="off" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="邮箱" label-width="100px" prop="email">
                <el-input v-model="form.email" autocomplete="off" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="密码" label-width="100px" prop="password">
                <el-input type="password" :disabled="data" v-model="form.password" autocomplete="off"
                    placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="备注" label-width="100px">
                <el-input v-model="form.note" autocomplete="off" placeholder="请输入备注" type="textarea" />
            </el-form-item>
            <el-form-item label="是否启用" label-width="100px">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emit('hide')">取消</el-button>
                <el-button type="primary" @click="sureFn"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup lang="ts">
import { FormInstance, ElMessageBox, ElMessage } from "element-plus"
import { reactive, ref, watch } from "vue";
import { user } from "@/api";


const form = reactive<IRegisterUserParams>({
    username: "",
    nickName: "",
    email: "",
    password: "",
    note: "",
    status: 0,
});


const rules = {
    username: [
        { required: true, message: "请输入账号", trigger: "blur" },
        { min: 6, max: 20, message: "账号要在6~20个字符之间", trigger: "blur" },
    ],
    nickName: [
        { required: true, message: "请输入姓名", trigger: "blur" },
        { min: 6, max: 20, message: "姓名要在6~20个字符之间", trigger: "blur" },
    ],
    email: [
        { required: true, message: "请输入邮箱", trigger: "blur" },
        { type: "email", message: "请填空正确的邮箱地址", trigger: ["blur", "change"] },
    ],
    password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { message: "密码要在6~20个字符之间", trigger: "blur" },
    ]
}

const props = defineProps({
    show: {
        type: Boolean,
        default: true,
    },
    data: {
        type: Number,
        default: 0,
    },

});

const emit = defineEmits(["hide", "refresh"])

// 点击确定
const formRef = ref<FormInstance>()

const sureFn = () => {
    // 表单检验，如果通过，再弹出提示
    formRef.value?.validate((valid: boolean) => {

        if (valid) {
            ElMessageBox.confirm("确定要添加该用户吗？", "添加用户", {
                type: "warning",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(() => {
                    // 点击确定的回调\
                    // 如果是编辑  发起修改用户信息请求
                    if (props.data !== 0) {
                        user.updateUserInfoApi(form as IUserModel).then((res) => {
                            if (res.code === 200) {
                                // 提示用户
                                ElMessage.success("修改信息成功")
                                // 关闭对话框
                                emit("hide")
                                // 刷新表格
                                emit("refresh")
                            }
                        })
                    } else {
                        // 如果是新增，发注册用户的请求
                        // 发请求把用户添加到后端
                        user.registerUserApi(form).then((res) => {
                            if (res.code === 200) {
                                // 添加成功
                                ElMessage.success("用户添加成功！")
                                // 关闭添加的弹出
                                emit("hide");
                                // 通知父组件刷新表格
                                emit("refresh")
                                // 关闭dialog后进行清空

                            } else {
                                // 添加失败
                                ElMessage.error(res.message + "请重试")
                            }
                        })
                    }

                })
                .catch(() => { });
        } else {
            return false;
        }
    });
};

// 什么时候发请求向服务器获取我们要的数据 -
// 当我们点击编辑，会修改从父组件传递进来的一个 data , 其实就是id
// 当该id不为0，就是点的编辑
// watch 来监听 id(props.data), 当不为0 ，才向服务器发请求
watch(
    () => props.data,
    () => {
        if (props.data === 0) {
            return
        }

        // 否则就是点击了编辑，就可以向服务器发起请求
        user.getUserInfoApi(props.data).then((res) => {
            if (res.code === 200) {
                // 把数据给表单
                Object.assign(form, res.data)
                // Object.assign() 
            }
        })
    }


)

</script>
  
<style scoped>

</style>